<template>
  <div class="app-container">
    <div class="app-container-inner">
      <h3>导入编码数据</h3>
      <div class="card">
        <el-upload
          ref="upload"
          class="upload-demo"
          :limit="1"
          :on-exceed="handleExceed"
          :auto-upload="false"
        >
          <template #trigger>
            <div class="choose">
              <p><span>请选择导入文件</span></p>
              <button class="btn view">浏览 </button>
            </div>
          </template>
        </el-upload>
        <div class="down">
          <el-icon><Download /></el-icon>
          <span>下载导入模版</span>
        </div>
      </div>
      <p class="tips">将本地的编码数据表格上传文件</p>
      <div class="footer">
        <div class="btns">
          <button class="btn">导入</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { genFileId } from 'element-plus'
  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
  import {Download} from "@element-plus/icons-vue";

  const upload = ref<UploadInstance>()

  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
